<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="files">
        <title>个人信息</title>       
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user_profile.css')}" type="text/css">
        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
        <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
        <script type="text/javascript" src="${resource(dir: 'js', file: 'area.js')}"></script>
        <style>
	    .form-qr-code-box {
		    position: initial;
		}
	    .form-qr-code-box button {
		    position: absolute;
		    border-radius: 0;
		    color: #fb6e50;
		    border-left: 1px solid #ccc;
		    top: 0;
		    right: 0px;
		    line-height: 38px;
		}
		.form-single-img{
			text-align:center;
		}
		.form-single-img .img-box {
		    width: 130px;
		    height: 0;
		    padding-bottom: 82px;
		    margin:0 auto;
		}
		
		.ui-avatar input[type=file]{
			position: absolute;
		    width: 100%;
		    height: 100%;
		    left: 0;
		    top: 0;
		    z-index: 100;
		    opacity: 0;
		}
		</style>
    </head>
    
<body>

	<div class="step step1" >
	<section class="ui-container">
        <ul class="ui-list ui-border-tb">
            <li>
                <div class="ui-list-info ui-border-t ">
                    <h4>头像</h4>
                </div>
                <a href="#" class="ui-avatar">
                    <g:if test="${user.headimgurl != null}">
                		<span  id="userimg" style="background-image:url(${user?.headimgurl})">
                		<input type="file" name="img" id="img">
	             		<input type="hidden" name="headimg" id="headimg" value="${user?.headimgurl}">
                		</span>
                	</g:if>
                	<g:else>
                		<span  id="userimg" style="background-image:url(${resource(dir:'images/demo',file:'demo-avatar-1.jpg')})">
                		<input type="file" name="img" id="img">
	             		<input type="hidden" name="headimg" id="headimg" value="">
                		</span>
                	</g:else>
                </a>
            </li>
        </ul>

        <div class="ui-form ui-border-t">
        <g:if test="${user?.verify == 'pass'||user?.verify == 'wait' ||user?.verify == 'refuse'}">
            <a href="#" class="ui-form-item ui-border-b ui-arrowlink" onclick="goStep(6)">
                <label>真实姓名</label>
                <input class="txt" id="realNamelink" type="text" readonly="" value="${user?.realName}">
                <%--
                <g:else>
                <label>昵称</label>
                <p class="txt">${user.nickname}</p>
                </g:else>
            	--%>
            </a>
            </g:if>
            <a href="#" class="ui-form-item ui-border-b ui-arrowlink" onclick="goStep(8)">
                <label>昵称</label>
                <input class="txt" id="nickNamelink" type="text" readonly="" value="${user?.nickname}">
            </a>
            <g:if test="${user?.verify == 'pass'||user?.verify == 'wait' ||user?.verify == 'refuse'}">
            <a href="#" class="ui-form-item ui-border-b ui-arrowlink" onclick="goStep(7)">
                <label>手机号</label>
                <input class="txt" id="mobilelink" type="text" readonly="" value="${user?.mobile.replace(user?.mobile.substring(3,7), "****")}">
            </a>
            </g:if>
            <!--  
            <a href="#" class="ui-form-item ui-border-b ui-arrowlink">
                <label>我的地址</label>
                <p class="txt">新增地址</p>
            </a>
            -->
        </div>
        
		<g:if test="${user?.verify == 'pass'||user?.verify == 'wait' ||user?.verify == 'refuse'}">
        <div class="ui-form ui-border-t">
            <a href="#" class="ui-form-item ui-border-b ui-arrowlink" onclick="goStep(2)">
                <label>银行卡</label>
                <input class="txt" id="banklink" type="text"  readonly 
                value = '${user?.bankCard.replace(user?.bankCard.substring(4,user?.bankCard.length()-4), "*********")}'>
            </a>
        </div>
		</g:if>
        <div class="ui-form ui-border-t" style="margin-bottom:50px;" >
            <div class="ui-form-item ui-border-b ui-arrowlink" onclick="goStep(3)">
                <label>性别</label>
                <g:if test="${user?.sex==''}">
               		<input class="txt" id="genderlink" type="text"  readonly 
                value = '未填写'>
                </g:if>
                <g:else>
                	<input class="txt" id="genderlink" type="text"  readonly 
                value = '${user?.sex}'>
                </g:else>
            </div>
            <g:if test="${user?.verify == 'pass'||user?.verify == 'wait' ||user?.verify == 'refuse'}">
            <div class="ui-form-item ui-border-b ui-arrowlink" onclick="goStep(10)">
                <label>机构职位</label>
                <input class="txt" id="schoollink" type="text"  readonly 
                value = '${user?.school}'>
            </div>
            </g:if>
            <a href="#" class="ui-form-item ui-border-b ui-arrowlink" onclick="goStep(4)">
                <label>收货地址</label>
                <g:if test="${user?.addressinfo != null}">
                <input class="txt" id="addresslink" type="text"  readonly 
                value = '修改地址'>
                </g:if>
                <g:else>
                 <input class="txt" id="addresslink" type="text"  readonly 
                value = '${user?.country} ${user?.province} ${user?.city}'>
                </g:else>
            </a>
            <g:if test="${user?.verify == 'pass'||user?.verify == 'wait' ||user?.verify == 'refuse'}">
            <a href="#" class="ui-form-item ui-border-b ui-arrowlink" onclick="goStep(5)">
                <label>简介描述</label>
                <input class="txt" id="deplink" type="text"  readonly 
                value = '${user?.description}'>
              <textarea id="descriptions" style="display:none"  readonly>${user?.description}</textarea>
            </a>
            </g:if>
        </div>
        
        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="submit()">提交</button>
            </div>
        </footer>
       
    </section>
    </div>
     
    <!-- step2 详情页 -->
    <div class="step step2" style="display: none;">
    	<div class="header-line">
			<i class="sf ui-icon-return" onclick="back()"></i>
			<div class="ct">银行信息</div>
		</div>
        <div class="ui-form-item ui-border-b">
             <label for="#">银行卡</label>
             <input id="bankcard" type="text" placeholder="输入你的银行卡号" value = '${user?.bankCard}'>
        </div>
        <div class="ui-form-item  ui-border-b">
             <label for="#">开户行</label>
             <input id="backName" type="text" placeholder="开户行" value = '${user?.bankName}'>
       	</div>
        <div class="ui-form-item  ui-border-b">
             <label for="#">开户支行</label>
             <input id="subBranch" type="text" placeholder="开户支行" value = '${user?.subBranch}'>
         </div>
        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="compStep('banklink',$('#bankcard').val())">完成</button>
            </div>
        </footer>
    </div>
    
    <!-- step3 性别页 -->
    <div class="step step3" style="display: none;">
    	<div class="header-line">
			<i class="sf ui-icon-return" onclick="back()"></i>
			<div class="ct">性别</div>
		</div>
    	<div class="ui-form-item ui-border-b">
            <label for="#">选择性别</label>
        </div>
        <div class="ui-form-item ui-border-b">
            <label class="ui-radio" for="radio">
                <input type="radio" name="gender" checked="checked" value="男">
            </label>
            <p>男</p>
        </div>
        <div class="ui-form-item ui-border-b">
            <label class="ui-radio" for="radio">
                <input type="radio"  name="gender" value="女">
            </label>
            <p>女</p>
        </div>

        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="compStep('genderlink', getRadioValue())">完成</button>
            </div>
        </footer>
    </div>
    
    <!-- step4 地址页 -->
    <div class="step step4" style="display: none;">
    	<div class="header-line">
			<i class="sf ui-icon-return" onclick="back()"></i>
			<div class="ct">收货信息</div>
		</div>
		 <div class="form-common2">
        <div class="u-module">
                <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-tb">
                <label for="#">地区</label>   
                    <select name="" id="s_province">
                        <option value="0" selected="" disabled="">选择省</option>
                    </select>
                </div>
                <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-b">
                    <select name="" id="s_city">
                        <option value="0" selected="" disabled="">选择市</option>
                    </select>
                </div>
                <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-b">
                    <select name="" id="s_county">
                        <option value="0" selected="" disabled="">选择区县</option>
                    </select>
                </div>
                <div class="ui-form-item  ui-border-b">
                    <label for="#">街道地址</label>
                    <textarea placeholder="填写具体街道地址" id="detail">${user?.addressinfo?.detail}</textarea>
                </div>
                <div class="ui-form-item  ui-border-b">
                    <label for="#">姓名</label>
                    <input id="name" type="text" placeholder="填写收货人姓名" value="${user?.addressinfo?.name}">
                </div>
                <div class="ui-form-item  ui-border-b">
                    <label for="#">手机号码</label>
                    <input id="phone" type="text" placeholder="填写收货人手机号码" value="${user?.addressinfo?.phone}">
                </div>
            </div>
		</div>
        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="compStep('addresslink',$('#detail').val())">完成</button>
            </div>
        </footer>
    </div>
    
    <!-- step5 简介页 -->
    <div class="step step5" style="display: none;">
    	<div class="header-line">
			<i class="sf ui-icon-return" onclick="back()"></i>
			<div class="ct">描述</div>
		</div>
		<div class="form-common2">   
        <div class="ui-form-item ui-border-b ui-form-item-textarea">
             <label for="#">简介描述</label>
             <textarea id="description" class="count" data-length="800" placeholder="用简洁有趣的文字介绍一下你自己，越清晰的描述越能让更多人信任你。" >${user?.description}</textarea>
              <g:if test="${user?.description}">
             <div class="form-unit count">${800 - user?.description?.length()}</div>
             </g:if>
             <g:else>
             <div class="form-unit count">${800 - 0}</div>
             </g:else>
        </div>
        </div>

        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="compSteps('deplink','descriptions', $('#description').val())">完成</button>
            </div>
        </footer>
    </div>
    
    <!-- step6 姓名页 -->
    <div class="step step6" style="display: none;">
    	<div class="header-line">
			<i class="sf ui-icon-return" onclick="back()"></i>
			<div class="ct">真实姓名</div>
		</div>
        <div class="ui-form-item ui-border-b">
             <label for="#">真实姓名</label>
             <input id="realName" type="text" placeholder="输入姓名" value='${user?.realName}'>
        </div>

        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="compStep('realNamelink', $('#realName').val())">完成</button>
            </div>
        </footer>
    </div>
    
    
    <!-- step7 手机页 -->
    <div class="step step7" style="display: none;">
    	<div class="header-line">
			<i class="sf ui-icon-return" onclick="back()"></i>
			<div class="ct">手机号</div>
		</div>
        <div class="ui-form-item ui-border-b">
             <label for="#">手机号</label>
             <input id="mobile" type="text" placeholder="" value='${user?.mobile}'>
        </div>

		<div class="ui-form-item ui-border-b show">
            <label for="#">验证码</label>
            <div class="form-qr-code-box">
                <input type="text" placeholder="验证码" id="authCode" style="width: 65%">
                <button type="button" style="width: 35%">发送验证码</button>
            </div>
        </div>
        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="compStep('mobilelink', $('#mobile').val())">完成</button>
            </div>
        </footer>
    </div>
    
    <!-- step8 昵称页 -->
    <div class="step step8" style="display: none;">
    	<div class="header-line">
			<i class="sf ui-icon-return" onclick="back()"></i>
			<div class="ct">昵称</div>
		</div>
        <div class="ui-form-item ui-border-b">
             <label for="#">昵称</label>
             <input id="nickName" type="text" placeholder="输入姓名" value='${user?.nickname}'>
        </div>

        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="compStep('nickNamelink', $('#nickName').val())">完成</button>
            </div>
        </footer>
    </div>
    
    <!-- step10 机构页 -->
    <div class="step step10" style="display: none;">
    	<div class="header-line">
			<i class="sf ui-icon-return" onclick="back()"></i>
			<div class="ct">机构职位</div>
		</div>
        <div class="ui-form-item ui-border-b">
             <label for="#">机构职位</label>
             <input id="school" type="text" placeholder="如：上海紫罗兰小学语文教师" value='${user?.school}'>
        </div>

        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="compStep('schoollink', $('#school').val())">完成</button>
            </div>
        </footer>
    </div>
    
    <!-- step9 头像页
    <div class="step step9" style="display: none;">
    	<div class="header-line">
			<i class="sf ui-icon-return" onclick="back()"></i>
			<div class="ct">头像</div>
		</div>
		<div class="form-single-img">
			<label for="#">上传头像</label>
	        <div class="img-box" id="Headimg">
	             <input type="file" name="img" id="img">
	             <input type="hidden" name="headimg" id="headimg" value="">
	        </div>
        </div>

        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="compImg('#userimg', $('#headimg').val())">完成</button>
            </div>
        </footer>
    </div>
     -->
     <script type="text/javascript">
	var authCodeStats = false;
	(function() {
		_init_area();
		
		$('.form-qr-code-box button').click(function(){
			//发送短信
            var mobile = $('#mobile').val();
            if(!sendSMS(mobile)){//号码格式验证成功即返回true
                return;
            };

            var obj = $(this).attr('disabled', true);
            var count = null, i = 60;
            obj.text(i + '秒后可重发');
            count = setInterval(function(){
                i--;
                if (i <= 0) {
                    obj.removeAttr('disabled').text('重发验证码');
                    clearInterval(count)
                } else {
                    obj.text(i + '秒后可重发');
                }
            }, 1000)
        });
		$('#userimg').on('change', 'input[type=file]', function(){
			 var files = [$('#userimg input[type=file]').attr('id')]
 			$.ajaxFileUpload({  
    			url:'/scfire/project/imgSaveMb',  
    			secureuri:false,  
    			dataType:'text',
    			fileElementId:files,//file标签的id 
    			success: function (data, status) { 
		           	if(data=='large'){
		           		showWarn('图片过大')
		           		return
		           	}
		       		if(data=='format'){
		           		showWarn('图片格式不对')
		           		return
		           	}
	               //把图片替换  
	               if(data=='fail'){
	               	showWarn('上传失败')
	               }else{
	                	 //图片预览
	                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
	                   $("#userimg").css('background-image', 'url(' + imageurl + ')');
	                   //图片地址赋值给后台
	                   $("#headimg").val(imageurl);
	                   $("#img").replaceWith('<input type="file" name="img" id="img">');
	                  //alert($("#identifyimg").val());   	                            
	               }
		           },  
		           error: function (data, status, e) {  
		           }
		       	 });
       });
		if('${user.addressinfo?.province}' != ''){
			$("#s_province").val('${user.addressinfo?.province}');
		}
		change(1);
		if('${user.addressinfo?.city}' != ''){
			$("#s_city").val('${user.addressinfo?.city}');
		}
		change(2);
		if('${user.addressinfo?.area}' != ''){
			$("#s_county").val('${user.addressinfo?.area}');
		}

		var bind_name = 'input';
        if (navigator.userAgent.indexOf("MSIE") != -1) {
            bind_name = 'propertychange';
        }
		
		$('.count').bind(bind_name, function() {
            checkWords(this, $(this).attr('data-length'));
        })
        $('.count').blur(function() {
            if ($(this).val().length > $(this).attr('data-length')) {
                $(this).val($(this).val().substr(0, $(this).attr('data-length')));
            }
        });
		
    })();

	
     function checkWords (obj, n) {
        n = parseInt(n);
        var c = 0;
        if ($(obj).val().length > n) {
            c = n-$(obj).val().length;
             $(obj).siblings('.count').css("color","red");
        } else {
            c = n - $(obj).val().length;
             $(obj).siblings('.count').css("color","#988e89"); 
        }
       $(obj).siblings('.count').text(c);
        
        //
        //$(obj).val($(obj).val().substr(0,n));
        
    }
	function checkAuthCode(){
        var mobile = $("#mobile").val();
    	var value = $("#authCode").val();
    	$.ajax({
			url:"/scfire/user/authCode",
			type:'POST',
			data:{
				  "code":value,
				  "mobile":mobile
				  },
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				var result = JSON.parse(data).info.text;
				var code = JSON.parse(data).code;
				if(code=="200"){
				//	alert(result);
					authCodeStats = true;
				}else{
					alert('验证码校验失败！');
					authCodeStats = false;
				}				
			},
			error: function (data){
				alert('验证码校验失败！');
				authCodeStats = false;
			}
		}); 
    }
	
	function goStep (n) {
        $('.step.step' + n).show().siblings('.step').hide();
        //$(targetInput).val(value);
    }

    function compStep(id, value){
    	$('.step.step' + 1).show().siblings('.step').hide();
    	$('#'+id).val(value);
    	//console.log(value);
    }
    function compSteps(id,id2, value){
    	$('.step.step' + 1).show().siblings('.step').hide();
    	$('#'+id).val(value);
    	$('#'+id2).val(value);
    	//console.log(value);
    }
    function compImg(selector, value){
    	$('.step.step' + 1).show().siblings('.step').hide();
    	var imageurl = "/scfire/project/imgRead?img="+value;
    	$(selector).css('background-image', 'url(' + imageurl + ')');
    }
    function back(){
    	$('.step.step' + 1).show().siblings('.step').hide();
    	//console.log(value);
    }

    function getRadioValue(){
        return $("input[name='gender']:checked").val();
    }

    function checkBankNumber(value){
    	var mobile = value
        if(!(/^\d{12}|\d{20}$/.test(mobile))){ 
            //alert("银行账号格式错误");
            return false; 
        }else{
            return true;
        } 
    }
    
    function submit(){

    	var bankCard = $("#bankcard").val();
    	//var address = $("#addresslink").val();
    	var city = $("#s_city").val();
    	var area = $("#s_county").val();
    	var detail = $("#detail").val();
    	var province = $("#s_province").val();
    	var phone = $("#phone").val();
    	var name = $("#name").val();
    	var gender = $("#genderlink").val();
    	var description = $("#descriptions").val();
    	var originalPhoneNum = '${user.mobile}';
    	var mobile= $("#mobile").val();
    	var realName= $("#realNamelink").val();
    	var nickName= $("#nickNamelink").val();
    	var bankName= $("#bankName").val();
    	var subBranch= $("#subBranch").val();
    	var headimg = $("#headimg").val();
    	var imageurl = headimg;
    	var school = $("#schoollink").val();
    	
    	 <g:if test="${user?.verify == 'pass'||user?.verify == 'wait'}">
    	if(!checkBankNumber(bankCard)){
    		alert("请先核对您的银行账号是否填写有误！");
    		return;
        }
        </g:if>
    	
    	//修改手机号
        if(originalPhoneNum != mobile){
	        checkAuthCode();
	        if(!authCodeStats){
	        	alert("您修改了手机号，请重新验证！");
	    		return;
	        }
        }
        
    	$.ajax({
			url:"/scfire/user/userInfoModify",
			type:'POST',
			data:{
				  "bankCard":bankCard,
				  "province":province,
				  "city":city,
				  "area":area,
				  "detail":detail,
				  "phone":phone,
				  "school":school,
				  "name":name,
				  "gender":gender,
				  "description":description,
				  "mobile":mobile,
				  "realName":realName,
				  "nickName":nickName,
				  "bankName":bankName,
				  "subBranch":subBranch,
				  "headimgurl":imageurl},
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				if(data=="success"){
					window.location.href='/scfire/user/userCenter';
				}
							
			},
			error: function (data){
				alert("提交失败.");
			}
		});
    }

    function sendSMS(mobile){

        if(!checkPhoneNumber(mobile)){
        	alert("号码格式不正确，短信发送失败.");
        	return false;
        }
    	$.ajax({
			url:"/scfire/SmsVerification/sendSmsVerification",
			type:'POST',
			data:{
				  "mobile":mobile
				  },
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				var result = JSON.parse(data).info.text;
				if(data.code=="200"){
					alert('短信发送成功.');
				}else{
				//	alert(result);
				}				
			},
			error: function (data){
				alert("短信发送失败.请稍后再试");
			}
		});
		return true;
    }

    function checkPhoneNumber(value){
    	var mobile = value
    	console.log(mobile)
        if(!(/^1[3|5|8][0-9]\d{8}$/.test(mobile))){ 
            //alert("手机号格式错误");
            //isPhoneNumVailded = false;
            return false; 
        }else{
        	//isPhoneNumVailded = true;
            return true;
        } 
    }
</script>
</body>
</html>